@import "utils";
.UserTagView {
  color: $oc-gray-8;
  font-size: 0.875rem;
  section {
    .section-title {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      font-weight: 500;
      border-bottom: 1px solid $oc-gray-2;
    }
    ul {
      margin: 0;
      list-style: none;
      padding-left: 0;
      padding-top: 0.375rem;
      padding-bottom: 0.375rem;
      -webkit-overflow-scrolling: touch;
      .placer {
        display: none;
      }
      @include media("<large") {
        display: flex;
        overflow-x: scroll;
        padding-bottom: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        .placer {
          display: block;
          width: 0.5rem;
        }
      }
      li {
        @include media("<large") {
          a {
            display: block;
            padding: 0.25rem 0.5rem;
            background: $oc-gray-0;
            border: 1px solid $oc-gray-4;
            border-radius: 4px;
            font-weight: 500;
          }
          &+li {
            margin-left: 0.5rem;
          }
        }
        flex-shrink: 0;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        font-size: 0.875rem;
        .count {
          margin-left: 0.25rem;
          color: $oc-gray-5;
        }
        .active {
          color: $oc-violet-5;
          font-weight: 800;
          @include media("<large") {
            border: 1px solid $oc-violet-4;
            background: white;
            font-weight: 500;
            color: $oc-violet-6;
          }
        }
      }
    }
  }
  section+section {
    margin-top: 1.5rem;
  }
}